<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—能耗公示"></Header>

    <section class="search_bar">
      <LSelect label="对象选择" placeholder="请选择对象选择"></LSelect>
      <LDateTimeSelect2 label="查询日期" style="margin-left: 30px"></LDateTimeSelect2>
      <LButton label="查询" style="margin-left: 30px"></LButton>
    </section>

    <section class="container">
      <div class="box">
        <div class="part">
          <table>
            <tr>
              <th>项目</th>
              <th>数值</th>
              <th>单位</th>
            </tr>
            <el-scrollbar>
              <tr v-for="(item, index) in tableData1" :key="index">
                <td>{{ item.project }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.unit }}</td>
              </tr>
            </el-scrollbar>
          </table>
        </div>
        <div class="part">
          <table>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>可租赁面积（平米）</th>
              <th>总用电量（度）</th>
              <th>单位面积用电量（度/平米）</th>
              <th>总用水量（吨）</th>
              <th>单位面积用水量（吨/平米）</th>
            </tr>
            <el-scrollbar>
              <tr v-for="(item, index) in tableData2" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.value1 }}</td>
                <td>{{ item.value2 }}</td>
                <td>{{ item.value3 }}</td>
                <td>{{ item.value4 }}</td>
                <td>{{ item.value5 }}</td>
                <td>{{ item.value6 }}</td>
              </tr>
            </el-scrollbar>
          </table>
        </div>
      </div>
      <div class="box">
        <div class="part">
          <table>
            <tr>
              <th>项目</th>
              <th>数值</th>
              <th>单位</th>
            </tr>
            <el-scrollbar>
              <tr v-for="(item, index) in tableData1" :key="index">
                <td>{{ item.project }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.unit }}</td>
              </tr>
            </el-scrollbar>
          </table>
        </div>

        <div class="part">
          <table>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>可租赁面积（平米）</th>
              <th>总用电量（度）</th>
              <th>单位面积用电量（度/平米）</th>
              <th>总用水量（吨）</th>
              <th>单位面积用水量（吨/平米）</th>
            </tr>
            <el-scrollbar>
              <tr v-for="(item, index) in tableData2" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.value1 }}</td>
                <td>{{ item.value2 }}</td>
                <td>{{ item.value3 }}</td>
                <td>{{ item.value4 }}</td>
                <td>{{ item.value5 }}</td>
                <td>{{ item.value6 }}</td>
              </tr>
            </el-scrollbar>
          </table>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "@/components/LInput.vue";
import LSelect from "@/components/LSelect.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LButton from "@/components/LButton.vue";

export default {
  components: {
    Header,
    LInput,
    LSelect,
    LButton,
    LDateTimeSelect2,
  },
  data() {
    return {
      tableData1: [
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
        {
          project: "总占地面积",
          number: "54512.00",
          unit: "平米",
        },
      ],
      tableData2: [
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
        {
          value1: "1#楼",
          value2: "54512.00",
          value3: "15487",
          value4: "15487",
          value5: "15487",
          value6: "15487",
          value7: "15487",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
};
</script>
<style lang="less" scoped>
.bg {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .search_bar {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
  }
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow: hidden;

    .box {
      flex: 1;
      background: url("../../../assets/img/2 拷贝 4.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding: 20px 15px;
      box-sizing: border-box;
      overflow: hidden;

      .part {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        &:first-child {
          flex: 27;
        }

        &:last-child {
          flex: 73;
          margin-left: 20px;
        }

        table {
          height: 100%;
          display: flex;
          flex-direction: column;

          tr {
            flex: 1;
            min-height: 49px;
            display: flex;
            align-items: center;

            &:nth-child(even) {
              background: rgba(93, 113, 212, 0.05);
            }

            &:nth-child(odd) {
              background: rgba(93, 113, 212, 0.1);
            }

            th {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 15px;
              font-weight: 400;
              color: #6392d3;
            }

            td {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 15px;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
